<template>
	<view class="content">
		<view class="box_bg" :style="'background: url('+ c_imgPath + 'indexBg.png'+ ') repeat-y 0 0 / 100% auto;'">

		</view>
		<view class="fixed">
			<view class="head">
				<view class="status_bar" :style="'height:'+ statusBarHeight +'px;'"></view>
				<view class="flex_center">
					<!-- <view class="header-left-title">
						乐掏
					</view> -->
					<view class="title_ipt">
						<image :src="c_imgPath+'search.png'"></image>
						<input type="text" placeholder="请输入关键字" placeholder-style="color:rgba(2555,255,255,0.6)"
							confirm-type="search" v-model="keyword" @confirm="show='',loadData(1)" />
					</view>
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" class="valbox" @init="mescrollInit" :down="downOption" @down="downCallback"
			@up="upCallback">
			<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" @change="swiperC">
				<swiper-item v-for="(v,i) in advert" :key='i'>
					<image class="yh_bg" :src="v.imgurl" @click="todetails(v.goods_id)"></image>
				</swiper-item>
			</swiper>
			<view class="swiper_bom">
				<image :src="c_imgPath+'top_bom.png?1'"></image>
				<view class="swiper_bom_item">
					<view class="bom_item_dian" v-for="(item,index) in advert" :key="index"
						:class="swiperCurrent == index?'chang':''"></view>
				</view>
			</view>
			<view class="gonggao" v-if="aa && notice_list && notice_list.length>0">
				<lff-barrage ref="lffBarrage"></lff-barrage>
			</view>

			<!-- <view class="title_ipt">
				<image :src="z_imgPath+'search.png'"></image>
				<input type="text" placeholder="请输入关键字" placeholder-style="color:rgba(2555,255,255,0.6)"
					confirm-type="search" v-model="keyword" @confirm="show='',loadData(1)" />
				<view>搜索</view>
			</view> -->

			<!-- <view class="ad">
				/pages/chouka/ka?goods_id='+shiwan_id+'&shiwan=1
				<view class="ad_item" @click="gotoPage('/pages/chouka/shiwan')">
					<image :src="test_imgPath + 'mine/sssq.png'"></image>
				</view>
				<view class="ad_item" @click="gotoPage('/pages/chouka/all_tujian')">
					<image :src="test_imgPath + 'mine/kptj.png'"></image>
				</view>
			</view> -->

			<view class="qiehuan">
				<view @click="getlist(v.id)" v-for="(v,i) in arr" :key="i" :style="show==v.id?
					'background: url('+ c_imgPath + 'title_sel.png'+ ') no-repeat 0 0 / 100% 100%;'
					:
					'background: url('+ c_imgPath + 'title.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view :class="show==v.id?'xzs':'wzs'">{{v.title}}</view>
					<!-- <view class="qiehuan_line" v-if="show==v.id"> </view> -->
				</view>
			</view>
			<!-- 刷新浮框 -->
			<view class="xuanfu">
				<image :src="uu_imgPath + 'jqlfl.png'" @click="$refs.qunliao_show.open()"
					:show-menu-by-longpress="true"></image>
			</view>
			<view v-for="(item,index) in listdata" :key="index" class="qbt_con_item"
				:style="'background: url('+ u_imgPath + 'kuang_bg.gif?1'+ ') no-repeat 0 0 / 100% 100%;'"
				@click="gotoPage('/pages/chouka/ka?goods_id=' + item.id)">
				<view class="qbt_con_item_title">{{item.title}}</view>
				<view class="qbt_con_item_img">
					<image :src="item.imgurl" mode="scaleToFill"></image>
					<view class="item_img_coupon" v-if="item.is_coupon == 2">
						<image :src="test_imgPath + 'mine/coupon_img2.png'"></image>
					</view>
				</view>
				<view class="qbt_con_item_bom"
					:style="'background: url('+ c_imgPath + 'kuang_bg_bom.png'+ ') no-repeat 0 0 / 100% 100%;'">
					<view class="qbt_con_item_bom_text">每包含{{item.card_num}}张</view>
					<view class="qbt_con_item_bom_price">￥<text>{{item.show_price}}</text></view>
				</view>
				<!-- <view class="list_1">
					<image :src="item.imgurl"></image>
					<view>{{item.title}}</view>
					<view class="redu_box">
						<view class="redu">
							<image :src="a" v-for="(a,b) in item.join_user" :key="b" v-if="b<10"
								:style="'transform:translateX('+-b*18+'rpx'+')'"> </image>
						</view>

						<text>{{item.join_count}}次参与</text>
					</view>

				</view>
				<view class="list_2">
					<view>{{item.title}}</view>
					<view><text>{{item.price}}</text></view>
				</view> -->
			</view>
		</mescroll-body>
		<view class="" style="height: 100rpx;"></view>

		<!-- 群聊弹窗 -->
		<uni-popup ref="qunliao_show" type="center">
			<view class="pop" :style="'background: url('+u_imgPath+'qunliao_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
				<image :src="erweima" :show-menu-by-longpress="true"></image>
				<image :src="z_imgPath + 'close.png'" class="qunliao_close" @click="$refs.qunliao_show.close()">
				</image>
			</view>
		</uni-popup>
		<!-- 自定义底部 -->
		<!-- <tabbar :type="1"></tabbar> -->
	</view>
</template>

<script>
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	import tabbar from '@/components/tabbar/tabbar.vue'
	export default {
		components: {
			lffBarrage,
			tabbar
		},
		data() {
			return {
				z_imgPath: this.$z_img + 'chouka/',
				c_imgPath: 'https://qt.yhemall.com/chouka/',
				u_imgPath: 'https://qt.yhemall.com/shouye/',
				test_imgPath: 'https://qt.yhemall.com/',
				uu_imgPath: '/static/',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				arr: [],
				show: 0,
				keyword: '',
				listdata: [],
				downOption: {
					auto: false
				},
				advert: [],

				// 弹幕
				notice_list: [],
				aa: false,
				//轮播
				swiperCurrent: 0,
				token: '',
				//试玩
				shiwan_id: '',

				erweima: ''
			}
		},


		onUnload() {
			this.aa = false

		},
		onHide() {
			clearInterval(this.timer);
			this.aa = false
			uni.setStorageSync('page', this.$mp.page.route)
		},
		onLoad(v) {
			if (v.pid) {
				uni.setStorageSync('pid', v.pid)
			}
			this.getnews()
		},
		onShow() {
			this.token = uni.getStorageSync('token');
			let that = this;
			this.aa = true
			setTimeout(() => {
				that.colrdo()
			}, 500)
		},
		onShareAppMessage() {
			let that = this;
			return {
				title: "快来加入乐掏~",
				imageUrl: 'https://qt.yhemall.com/' + that.advert[0].imgurl,
				path: "/pages/chouka/index?pid=" + uni.getStorageSync('userinfo').ID + '&from=' + uni.getStorageSync(
					'userinfo').from
			};
		},
		methods: {
			//轮播滚动
			swiperC(e) {
				this.swiperCurrent = e.detail.current;
			},
			colrdo() { //插入一条弹幕
				let that = this;
				let a = 0;
				that.timer = setInterval(function() {
					that.$refs.lffBarrage && that.$refs.lffBarrage.add({
						item: that.notice_list[a].content,
						title: that.notice_list[a].title,
						color: that.notice_list[a].color,
						headimg: that.notice_list[a].headimg
					});
					if (a < that.notice_list.length - 1) {
						a++;
					} else {
						a = 0
					}
				}, 5000)
			},
			getnews() {
				let that = this;
				that.req({
					url: 'card_index',
					Loading: true,
					success(res) {
						if (res.status == 1) {
							that.advert = res.data.advert;
							that.notice_list = res.data.bullet_chat;
							that.shiwan_id = res.data.card_id;
							that.erweima = res.data.erweima;
						}
					}
				})
				that.req({
					url: 'card_category_list',
					Loading: true,
					success(res) {
						if (res.status == 1) {
							that.arr = res.data;
						}
					}
				})
			},
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				this.loadData(page.num);
			},
			loadData(pageNo) {
				let that = this;
				that.req({
					url: 'card_goods_list',
					data: {
						page: pageNo,
						category_id: that.show,
						keyword: that.keyword,
						user_id: uni.getStorageSync('userinfo').ID ? uni.getStorageSync('userinfo').ID : ''
					},
					success(res) {
						that.mescroll.endByPage(res.data.data.length, res.data.last_page);
						if (pageNo == 1) {
							that.listdata = res.data.data;
						} else {
							that.listdata = that.listdata.concat(res.data.data);
						}
					}
				})
			},

			getlist(v) {
				this.show = v;
				this.loadData(1)
			},

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.xuanfu image {
		width: 128rpx;
		height: 122rpx;
		margin-top: 20rpx;
	}

	.xuanfu {
		position: fixed;
		bottom: 391rpx;
		right: 0rpx;
		width: 128rpx;
		z-index: 21;
	}

	.qunliao_close {
		width: 70rpx;
		height: 70rpx;
		margin: 116rpx auto;
		display: block;
		/* position: absolute; */
	}

	.pop>image:nth-of-type(1) {
		width: 399rpx;
		height: 399rpx;
		margin: 258rpx auto 0;
		display: block;
	}

	.pop {
		width: 640rpx;
		height: 743rpx;
		padding-top: 1rpx;
		position: relative;
	}

	swiper {
		width: 100%;
		/* height: 38rpx; */
		display: flex;
		align-items: center;
	}

	.ad {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		margin-top: 20rpx;

		.ad_item {
			flex: 1;
			text-align: center;

			image {
				width: 229rpx;
				height: 87rpx;
			}
		}
	}


	.yh_bg {
		width: 750rpx;
		height: 490rpx;
	}

	.swiper-box {
		width: 750rpx;
		height: 490rpx;
		margin: 0rpx auto;
		position: relative;
	}

	.swiper_bom {
		width: 100%;
		height: 104rpx;
		position: absolute;
		top: 390rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.swiper_bom_item {
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;

			.bom_item_dian {
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #999999;
				margin-right: 10rpx;
			}

			.chang {
				width: 30rpx;
				border-radius: 30rpx;
				background-color: #FFFFFF;
			}
		}
	}

	.gonggao {
		width: 750rpx;
		height: 300rpx;
		border-radius: 39rpx;
		margin: 0rpx auto;
		overflow: hidden;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		position: absolute;
		top: 160rpx;
		z-index: 16;
	}

	.header_title {
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 30rpx;
		width: 100%;
		font-weight: bold;
		box-sizing: border-box;
		color: #FFFFFF;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.fixed {
		// background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1));
		width: 750rpx;
		box-sizing: border-box;
		position: fixed;
		/* #ifdef MP */
		top: 0;
		/* #endif */
		/* #ifndef MP */
		top: 0rpx;
		/* #endif */
		z-index: 15;
	}


	.content {
		width: 100vw;
		/* height: 100vh; */
		box-sizing: border-box;
		position: relative;
		background-attachment: fixed;
		position: relative;
	}

	.header-left-title {
		padding-left: 30rpx;
		font-size: 40rpx;
		font-weight: bold;
		background: linear-gradient(0deg, #B18DD6 0%, #FFFFFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-family: 'pangmen';

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}
	}

	.title_ipt {
		display: flex;
		align-items: center;
		// margin: 20rpx 0;
		margin-top: 10rpx;
		margin-left: 30rpx;
		border-radius: 30rpx;
		padding-left: 30rpx;
		width: 450rpx;
		height: 60rpx;
		background: rgba(#999999, 0.6);
		border-radius: 29rpx;
		box-sizing: border-box;
	}

	.title_ipt>image {
		width: 26rpx;
		height: 26rpx;
	}

	.title_ipt>input {
		width: 77%;
		height: 60rpx;
		box-sizing: border-box;
		border-radius: 105rpx;
		font-size: 28rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.6);
		padding-left: 20rpx;
	}

	.title_ipt>view {
		width: 94rpx;
		height: 35rpx;
		background: #B07CDD;
		border-radius: 18rpx;
		font-size: 23rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.qiehuan {
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		width: 690rpx;
		margin: 0 auto;
		box-sizing: border-box;
		/* font-family: 'zcq'; */
		font-weight: bold;
		overflow-x: scroll;
		margin-top: 30rpx;
	}

	.qiehuan_line {
		margin: -10rpx auto;
		width: 50rpx;
		height: 20rpx;
		border-bottom: 4rpx solid #B07CDD;
		border-radius: 2rpx;
	}


	.qiehuan>view {
		/* flex: 1; */
		// width: 130rpx;
		padding: 0 10rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.wzs {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 1);
	}

	.xzs {
		font-size: 28rpx;
		background: linear-gradient(0deg, #B75AFF 0%, #E7CBFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.qbt_con_item {
		border-radius: 20rpx 20rpx 0 0;
		width: 690rpx;
		height: 400rpx;
		margin: auto;
		margin-top: 30rpx;
		position: relative;
		padding: 0rpx 20rpx;
		box-sizing: border-box;

		.qbt_con_item_title {
			color: #FFFFFF;
			padding-left: 60rpx;
			font-size: 26rpx;
			line-height: 51rpx;
		}

		.qbt_con_item_img {
			text-align: center;

			image {
				// width: 100%;
				height: 260rpx;
				display: block;
				margin: 0 auto;
			}

			.item_img_coupon {
				position: absolute;
				bottom: 70rpx;
				right: -20rpx;

				image {
					width: 160rpx;
					height: 120rpx;
				}
			}
		}

		.qbt_con_item_bom {
			height: 70rpx;
			position: absolute;
			bottom: 22rpx;
			left: 2.5%;
			width: 95.5%;
			display: flex;
			align-items: center;

			.qbt_con_item_bom_text {
				flex: 1;
				color: #FFFFFF;
				font-size: 24rpx;
				margin-left: 30rpx;
				margin-top: 10rpx;
			}

			.qbt_con_item_bom_price {
				font-size: 28rpx;
				color: #FFFFFF;
				margin-right: 20rpx;
				width: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 34rpx;
				}
			}
		}
	}

	.list_1 {
		width: 680rpx;
		height: 305rpx;
		border-radius: 7rpx;
		position: relative;
	}

	.list_1>image {
		width: 680rpx;
		height: 305rpx;
		border-radius: 7rpx;
	}

	.list_1>view:nth-of-type(1) {
		position: absolute;
		top: 0;
		left: 0;
		padding: 6rpx 60rpx 4rpx 20rpx;
		background: #FFFFFF;
		border-radius: 0 0 40rpx 0;
		color: #1734f4;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.redu {}

	.redu>image {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		border-radius: 50%;
	}

	.redu_box {
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgba(22, 22, 22, 0.6);
		width: 100%;
		border: 0 0 7rpx 7rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 60rpx;
		color: #FFFFFF;
		font-size: 20rpx;
	}

	.list_2 {
		padding: 20rpx;
		color: #FFFFFF;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		font-size: 28rpx;
	}

	.list_2>view:nth-of-type(2) {
		font-size: 24rpx;
	}

	.list_2 text {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #B07CDD;
	}
</style>